<template>
  <div>
    <searchFor></searchFor>
    <el-table :data="inventory.inventoryList" border style="width: 100%">
      <el-table-column fixed prop="commodityName" align="center" label="名称" width="150"></el-table-column>
      <el-table-column prop="price" label="价格" align="center" width="120"></el-table-column>
      <el-table-column prop="orgin" label="产地" align="center" width="120"></el-table-column>
      <el-table-column prop="package" label="包装" align="center" width="120"></el-table-column>
      <el-table-column prop="amount" label="规格" align="center" width="120"></el-table-column>
      <el-table-column prop="img" label="图片" align="center" min-width="120">
        <template slot-scope="scope">
          <img
            :src="'http://localhost:3003/images/'+scope.row.img"
            alt
            style="width: 100px;height: 100px"
          />
        </template>
      </el-table-column>
      <el-table-column prop="inventoryNumbers" align="center" label="库存量" width="120"></el-table-column>
      <el-table-column fixed="right" align="center" label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="shangjia(scope.row)" type="text" size="small">上架</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <div class="paginationMain">
        <span @click="firstPage">首页</span>
        <span @click="previous">上一页</span>
        <span @click="mynextPage">下一页</span>
        <span @click="maxPage">尾页</span>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import searchFor from "./searchFor";
import { createNamespacedHelpers } from "vuex";
var { mapState, mapActions } = createNamespacedHelpers("merchant");
export default {
  components: {
    searchFor
  },
  methods: {
    ...mapActions([
      "getInventoryListAsync",
      "activeUpdateInventoryAsync",
      "removeInventoryAsync",
      "nextPageAsync",
      "previousAsync",
      "firstPageAsync",
      "maxPageAsync",
      "putaway"
    ]),
    handleClick(row) {
      // console.log(row)
      this.activeUpdateInventoryAsync(row);
      this.$router.push("/admin/index/updateInventory");
    },
    removeClick(data) {
      this.removeInventoryAsync(data);
    },
    firstPage() {
      this.firstPageAsync();
      this.getInventoryListAsync(this.merchantId);
    },
    previous() {
      this.previousAsync();
      this.getInventoryListAsync(this.merchantId);
    },
    mynextPage() {
      this.nextPageAsync();
      this.getInventoryListAsync(this.merchantId);
    },
    maxPage() {
      this.maxPageAsync();
      this.getInventoryListAsync(this.merchantId);
    },
    //商品上架
    shangjia(data) {
      this.open2();
      this.putaway(data);
    },
    open2() {
      this.$message({
        message: "恭喜你,上架成功",
        type: "success"
      });
    }
  },

  data() {
    return {};
  },
  computed: {
    ...mapState(["inventory"])
  },
  created() {
    this.getInventoryListAsync(this.merchantId);
  }
};
</script>

<style scoped>
.el-table td,
.el-table th {
  text-align: center !important;
}
.pagination .paginationMain {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.pagination .paginationMain span {
  display: block;
  width: 50px;
  height: 30px;
  border: 1px solid #999;
  line-height: 30px;
  text-align: center;
  margin-right: 10px;
  font-size: 14px;
  border-radius: 5px;
  cursor: pointer;
}
.pagination .paginationMain span:hover {
  border: 1px solid #f3a83f;
  color: #f3a83f;
}
</style>